HTML 教程- (HTML5 标准) 超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。 您可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。 在本教程中,您将学习如何使用 HTML 来创建站点。 HTML 很容易学习!相信您能很快学会它! HTML 实例 本教程包含了数百个 HTML 实例。 使用本站的编辑器,..
HTML 简介 HTML 实例 [mycode3 type='html'] 菜鸟教程(runoob.com) 我的第一个标题 我的第一个段落。 [/mycode3] 尝试一下 » 实例解析 <!DOCTYPE html> 声明为 HTML5 文档 <html> 元素是 HTML 页面的根元素 <head&..
HTML 编辑器 img { width: 70%; } HTML 编辑器推荐 可以使用专业的 HTML 编辑器来编辑 HTML,菜鸟教程为大家推荐几款常用的编辑器: VS Code:https://code.visualstudio.com/ Sublime Text:http://www.sublimetext.com/ 你可以从以上软件的官网中下载对应的软件,按步骤安装即可。 接下来我们将为大家演示如何使..
HTML 基础- 4个实例 不要担心本章中您还没有学过的例子。 您将在下面的章节中学到它们。 HTML 标题 HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的。 实例 [mycode3 type='html'] 这是一个标题 这是一个标题 这是一个标题 [/mycode3] 尝试一下 » HTML 段落 HTML 段落是通过..
HTML 元素 HTML 文档由 HTML 元素定义。 HTML 元素..
HTML 属性 属性是 HTML 元素提供的附加信息。 HTML 属性 HTML 元素可以设置属性 属性可以在元素中添加附加信息 属性一般描述于开始标签 属性总是以名称/值对的形式出现,比如:name='value'。 属性实例 HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定
HTML 标题 在 HTML 文档中,标题很重要。 HTML 标题 标题(Heading)是通过 <h1> - <h6> 标签进行定义的。 <h1> 定义最大的标题。 <h6> 定义最小的标题。 实例 [mycode3 type='html'] 这是一个标题。 这是一个标题。 这是一个标题。 [..
HTML 段落 HTML 可以将文档分割为若干段落。 HTML 段落 段落是通过 <p> 标签定义的。 实例 [mycode3 type='html'] 这是一个段落 这是另一个段落 [/mycode3] 尝试一下 » 注意:浏览器会自动地在段落的前后添加空行。(</p> 是块级元素) 不要忘记结束标签 即使忘了使用结束标签,大多数浏览器也会..
HTML 文本格式化 HTML 文本格式化 加粗文本 斜体文本 电脑自动输出 这是 下标 和 上标 尝试一下 » HTML 格式化标签 HTML 使用标签 <b>('bold') 与 <i>('italic') 对输出的文本进行格式, 如:粗体 or 斜体 这些HTML标签被称为格式化标签(请查看底部完整标签参考手册)。 ..
HTML 链接 HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。 尝试一下 - 实例 HTML 链接 如何在HTML文档中创建链接。 (可以在本页底端找到更多实例) HTML 超链接(链接) HTML使用标签 <a>来设置超文本链接。 超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的..
HTML <head> 查看在线实例 <title> - 定义了HTML文档的标题 使用 <title> 标签定义HTML文档的标题 <base> - 定义了所有链接的URL 使用 <base> 定义页面中所有链接默认的链接目标地址。 <meta> - 提供了HT..
HTML 样式- CSS CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。 Look! Styles and colors Manipulate Text Colors, Boxes and more... 尝试一下 » 尝试一下 - 实例 HTML使用样式 本例演示如何使用添加到 <head> ..
HTML 图像 实例 Norwegian Mountain Trip 尝试一下 » 在线实例 插入图像 本例演示如何在网页中显示图像。 从不同的位置插入图片 本例演示如何将其他文件夹或服务器的图片显示到网页中。 (可以在本页底端找到更多实例。) HTML 图像- 图像标签( <img>)和源属性(Src) 在 HTML 中,图像由<img> 标签定义。 &a..
HTML 表格 HTML 表格实例: First Name Last Name Points Jill Smith 50 Eve Jackson 94 John Doe 80 Adam Johnson 67 在线实例 表格 这个例子演示如何在 HTML 文档中创建表格。 (可以在本页底端找到更多实例。)..
HTML 列表 HTML 支持有序、无序和定义列表: HTML 列表 有序列表 第一个列表项 第二个列表项 第三个列表项 无序列表 列表项 列表项 列表项 在线实例 无序列表 本例演示无序列表。 有序列表 本例演示有序列表。 (可以在本页底端找到更多实例。) HTML无序列表 无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。 无序列表使用 &am..
HTML <div> 和<span> HTML 可以通过 <div> 和 <span>将元素组合起来。 HTML 区块元素 大多数 HTML 元素被定义为块级元素或内联元素。 块级元素在浏览器显示时,通常会以新行来开始(和结束)。 实例: <h1>, <p>, &..
HTML 布局 网页布局对改善网站的外观非常重要。 请慎重设计您的网页布局。 在线实例 使用 <div> 元素的网页布局 如何使用 <div> 元素添加布局。 使用 <table> 元素的网页布局 如何使用 <table> 元素添加布局。 网站布局 大多数网站会把内容安排到多个列中(就像杂志或报纸那样)。 大多数..
HTML 表单和输入 HTML 表单用于收集用户的输入信息。 HTML 表单表示文档中的一个区域,此区域包含交互控件,将用户收集到的信息发送到 Web 服务器。 在线实例 实例以下实例创建了一个表单,包含两个输入框:[mycode4 type='html'] First name: Last name: [/mycode4]尝试一下 » 实例以下实例创建了一个表单,包含一个普通输入框和一个秘密..
HTML 框架 通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。 iframe语法: 该URL指向不同的网页。 iframe - 设置高度与宽度 height 和 width 属性用来定义iframe标签的高度与宽度。 属性默认以像素为单位, 但是你可以指定其按比例显示 (如:'80%')。 实例 [mycode3 type='html'] [/mycode3] 尝试一..
HTML 颜色 HTML 颜色由红色、绿色、蓝色混合而成。 颜色值 HTML 颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。 每种颜色的最小值是0(十六进制:#00)。最大值是255(十六进制:#FF)。 这个表格给出了由三种颜色混合而成的具体效果: 颜色值 颜色(Color) 颜色十六进制(Color HEX) 颜色RGB(Color RGB) ..
HTML 颜色名 目前所有浏览器都支持以下颜色名。 141个颜色名称是在HTML和CSS颜色规范定义的(17标准颜色,再加124)。下表列出了所有颜色的值,包括十六进制值。 提示: 17标准颜色:黑色,蓝色,水,紫红色,灰色,绿色,石灰,栗色,海军,橄榄,橙,紫,红,白,银,蓝绿色,黄色。点击其中一个颜色名称(或一个十六进制值)就可以查看与不同文字颜色搭配的背景颜色。 按颜色名排序 按十六进制的值排序 单击一个颜色名或者 16 进..
HTML 颜色值 颜色由红(R)、绿(G)、蓝(B)组成。 颜色值 颜色值由十六进制来表示红、绿、蓝(RGB)。 每个颜色的最低值为 0(十六进制为 00),最高值为 255(十六进制为FF)。 十六进制值的写法为
HTML 脚本 JavaScript 使 HTML 页面具有更强的动态和交互性。 在线实例 插入一段脚本 如何将脚本插入 HTML 文档。 使用 <noscript> 标签 如何应对不支持脚本或禁用脚本的浏览器。 HTML <script> 标签 <script> 标签用于定义客户端脚本,比如 JavaScript。 <s..
HTML 字符实体 HTML 中的预留字符必须被替换为字符实体。 一些在键盘上找不到的字符也可以使用字符实体来替换。 HTML 实体 在 HTML 中,某些字符是预留的。 在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。 如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities)。 字符实体类似这样: &am..
HTML 统一资源定位器(Uniform Resource Locators) URL 是一个网页地址。 URL可以由字母组成,如“runoob.com”,或互联网协议(IP)地址: 192.68.20.50。大多数人进入网站使用网站域名来访问,因为 名字比数字更容易记住。 URL - 统一资源定位器 Web浏览器通过URL从Web服务器请求页面。 当您点击 HTML 页面中的某个链接时,对应的 <a>..
HTML 速查列表 HTML 速查列表. 你可以打印它,以备日常使用。 HTML 基本文档 [mycode3 type='html'] 文档标题 可见文本... [/mycode3] 基本标签(Basic Tags) [mycode3 type='html'] 最大的标题 . . . . . . . . . . . . 最小的标题 这是一个段落。..
HTML 标签简写及全称 下表列出了 HTML 标签简写及全称: 标签 英文全称 中文说明 a Anchor 锚 abbr Abbreviation 缩写词 acronym Acronym 取首字母的缩写词 address ..
你已经完成了 HTML 的学习,下一步该学习什么呢? HTML 总结 本教程已教你如何使用 HTML 创建站点。 HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本,添加图片,创建链接、输入表单、框架和表格等等,并可将之存为文本文件,浏览器即可读取和显示。 HTML 的关键是标签,其作用是指示将出现的内容。 如需更多关于 HTML 的信息,请查看我们的 HTML 教程 和 HTML 参考手册 。 现在,你..
HTML - XHTML XHTML 是以 XML 格式编写的 HTML。 什么是 XHTML? XHTML 指的是可扩展超文本标记语言 XHTML 与 HTML 4.01 几乎是相同的 XHTML 是更严格更纯净的 HTML 版本 XHTML 是以 XML 应用的方式定义的 HTML XHTML 是 2001 年 1 月发布的 W3C 推荐标准 XHTML 得到所有主流浏览器的支持 为什么使用 XHTML? 因特网上的很多..
HTML5 简介 HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。 HTML5的设计目的是为了在移动设备上支持多媒体。 HTML5 简单易学。 什么是 HTML5? HTML5 是下一代 HTML 标准。 HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。 HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML..
HTML5 浏览器支持 你可以让一些较早的浏览器(不支持HTML5)支持 HTML5。 HTML5 浏览器支持 现代的浏览器都支持 HTML5。 此外,所有浏览器,包括旧的和最新的,对无法识别的元素会作为内联元素自动处理。 正因为如此,你可以 “教会” 浏览器处理 “未知” 的 HTML 元素。 甚至你可以教会 IE6 (Windows XP 2001) 浏览器处理未知的 HTML 元素。 将 HTML5 ..
HTML5 新元素 HTML5 新元素 自1999年以后HTML 4.01 已经改变了很多,今天,在HTML 4.01中的几个已经被废弃,这些元素在HTML5中已经被删除或重新定义。 为了更好地处理今天的互联网应用,HTML5添加了很多新元素及功能,比如: 图形的绘制,多媒体内容,更好的页面结构,更好的形式 处理,和几个api拖放元素,定位,包括网页 应用程序缓存,存储,网络工作者,等。 <canvas&..
HTML5 Canvas <canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形。 在画布上(Canvas)画一个红色矩形,渐变矩形,彩色矩形,和一些彩色的文字。 你的浏览器不支持 HTML5 的 <canvas> 元素. var c=document.getElementById('myCanvas'); var canvOK=..
HTML5 SVG SVG 定义为可缩放矢量图形。 HTML5 支持内联 SVG。 HTML <svg> 元素是 SVG 图形的容器。 SVG 有多种绘制路径、框、圆、文本和图形图像的方法。 SVG Sorry, your browser does not support inline SVG. 什么是SVG? SVG 指可伸缩矢量..
HTML5 MathML HTML5 可以在文档中使用 MathML 元素,对应的标签是 <math>...</math> 。 MathML 是数学标记语言,是一种基于XML(标准通用标记语言的子集)的标准,用来在互联网上书写数学符号和公式的置标语言。 注意:大部分浏览器都支持 MathML 标签,如果你的浏览器不支持该标签,可以使用最新版的 Firefox 或 Safari..
HTML5 Geolocation(地理定位) HTML5 Geolocation(地理定位)用于定位用户的位置。 定位用户的位置 HTML5 Geolocation API 用于获得用户的地理位置。 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。 浏览器支持 Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持Geolocation(地理..
function checkVideo() { let support = '非常棒!你的浏览器支持HTML5 video标签!', someSupport = 'Meh. Some support.', notSupport = 'Sorry. No video support.', vidTest = document.createElement('vid..
HTML5 Audio(音频) HTML5 提供了播放音频文件的标准。 互联网上的音频 直到现在,仍然不存在一项旨在网页上播放音频的标准。 今天,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。 HTML5 规定了在网页上嵌入音频元素的标准,即使用 <audio> 元素。 浏览器支持 Internet Explorer 9+, Firefox, Opera,..
HTML5 新的 Input 类型 HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。 本章全面介绍这些新的输入类型: color date datetime datetime-local email month number range search tel time url week 注意:并不是所有的主流浏览器都支持新的input类型,不过您已经可以在所有主流的浏览器中使用它..
HTML5 表单元素 HTML5 新的表单元素 HTML5 有以下新的表单元素: <datalist> <keygen> <output> 注意:不是所有的浏览器都支持HTML5 新的表单元素,但是你可以在使用它们,即使浏览器不支持表单属性,仍然可以显示为常规的表单元素。 HTML5 <datalist> 元素 ..
HTML5 表单属性 HTML5 新的表单属性 HTML5 的 <form> 和 <input>标签添加了几个新属性. <form>新属性: autocomplete novalidate <input>新属性: autocomplete autofocus form formaction formenc..
HTML5 语义元素 语义= 意义 语义元素 = 有意义的元素 什么是语义元素? 一个语义元素能够清楚的描述其意义给浏览器和开发者。 无语义 元素实例: <div> 和 <span> - 无需考虑内容. 语义元素实例: <form>, <table>, and <img> - 清楚的定义了它的..
HTML5 Web 存储 HTML5 web 存储,一个比 cookie 更好的本地存储方式。 什么是 HTML5 Web 存储? 使用HTML5可以在本地存储用户的浏览数据。 早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能. 数据以 键/值 对存在, web网页的数据只允许该网页访问使..
HTML5 Web SQL 数据库 Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 APIs。 如果你是一个 Web 后端程序员,应该很容易理解 SQL 的操作。 你也可以参考我们的 SQL 教程,了解更多数据库操作知识。 Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。 核心方法 以下是规范中定..
HTML5 应用程序缓存 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本。 什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。 应用程序缓存为应用带来三个优势: 离线浏览 - 用户可在应用离线时使用它们 速度 - 已缓存资源加载得更快 减少服务器负载 - 浏览器将只从..
HTML5 Web Workers web worker 是运行在后台的 JavaScript,不会影响页面的性能。 什么是 Web Worker? 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。 web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。 浏览器支持 ..
HTML5 服务器发送事件(Server-Sent Events) HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新。 Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器的更新。 以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。通过服务器发送事件,更新能够自动到达。 例子:Facebook/Twitter 更新、股价更新、..
HTML5 WebSocket WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。 在 WebSocket API 中,浏览器和服务器只需要做一个握手的动作,然后,浏..
HTML(5) 代码规范 HTML 代码约定 很多 Web 开发人员对 HTML 的代码规范知之甚少。 在2000年至2010年,许多Web开发人员从 HTML 转换到 XHTML。 使用 XHTML 开发人员逐渐养成了比较好的 HTML 编写规范。 而针对于 HTML5 ,我们应该形成比较好的代码规范,以下提供了几种规范的建议。 使用正确的文档类型 文档类型声明位于HTML文档的第一行: <!DOCTYPE ..
HTML 多媒体 Web 上的多媒体指的是音效、音乐、视频和动画。 现代网络浏览器已支持很多多媒体格式。 什么是多媒体? 多媒体来自多种不同的格式。它可以是您听到或看到的任何内容,文字、图片、音乐、音效、录音、电影、动画等等。 在因特网上,您会经常发现嵌入网页中的多媒体元素,现代浏览器已支持多种多媒体格式。 在本教程中,您将了解到不同的多媒体格式,以及如何在您的网页中使用它们。 浏览器支持 第一款因特网浏览器只支持文本,而..
HTML 插件 插件的功能是扩展 HTML 浏览器的功能。 HTML 助手(插件) 辅助应用程序(helper application)是可由浏览器启动的程序。辅助应用程序也称为插件。 辅助程序可用于播放音频和视频(以及其他)。辅助程序是使用 <object> 标签来加载的。 使用辅助程序播放视频和音频的一个优势是,您能够允许用户来控制部分或全部播放设置。 插件可以通过 <object&..
HTML 音频(Audio) 声音在HTML中可以以不同的方式播放. 问题以及解决方法 在 HTML 中播放音频并不容易! 您需要谙熟大量技巧,以确保您的音频文件在所有浏览器中(Internet Explorer, Chrome, Firefox, Safari, Opera)和所有硬件上(PC, Mac , iPad, iPhone)都能够播放。 在本章,菜鸟教程为您总结了问题和解决方法。 使用插件 浏览器插件是一种扩展浏..
HTML 视频(Video) 在 HTML 中播放视频的方法有很多种。 HTML视频(Videos)播放 实例 [mycode3 type='html'] [/mycode3] 尝试一下 » 问题以及解决方法 在 HTML 中播放视频并不容易! 您需要谙熟大量技巧,以确保您的视频文件在所有浏览器中(Internet Explorer, Chrome, ..
HTML 实例 HTML 基础 非常简单的HTML文档HTML 标题HTML 段落HTML 链接HTML 图片 实例解析 HTML 标题 HTML 标题在html源码中插入注释插入水平线 实例解析 HTML 段落 HTML 段落更多段落本例演示在 HTML 文档中折行的使用。 HTML 格式化的某些问题。 实例解析 HTML 文本格式化 文本格式化此例演示如何使用 pre 标签对空行和空格进行控制。此例演示..